<script setup>
import { ref } from "vue";
import { UserFilled, Hide } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import axiosUtil from "@/util/axios";
import { useRouter } from 'vue-router';

const router = useRouter();

const form = ref({
  username: "",
  password: "",
});

const rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const formRef = ref(null);

const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {

      //方法一通过地址直接请求后端
      // axios.post("http://localhost:8080/adminLogin",form.value)
      //   .then(response=>{
      //     console.log((response.data))
      //   }).catch(error=>{
      //     ElMessage.error('系统运行出错，请联系管理员')
      // })

      //方法二通过把http://localhost:8080封装到util下axios.js里请求后端
      try {
        let result = await axiosUtil.post("adminLogin", form.value);
        let data = result.data;
        if (data.code == 0) {
          ElMessage.success("登录成功");
          window.sessionStorage.setItem("token", data.token);
          window.sessionStorage.setItem("user",JSON.stringify(form.value))
           // 进行路由跳转，跳转到名为 'home' 的路由页面
           router.replace('/home' );
        } else {
          ElMessage.error(data.msg);
        }
      } catch (err) {
        console.log("error:" + err);
        ElMessage.error("出错啦！！！");
      }
    } else {
      console.log("验证失败");
    }
  });
};
</script>

<template>
  <div class="login-page">
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="title">鲜蔬果苑后台管理系统</div>
      <el-form-item class="ft" prop="username">
        <el-icon size="20" class="icon">
          <UserFilled />
          <!-- 显示用户图标 -->
        </el-icon>
        <el-input
          v-model="form.username"
          placeholder="请输入用户名"
          class="in"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-icon size="20" class="icon">
          <Hide />
        </el-icon>
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          class="in"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" class="login"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<style  scoped>
.login-page {
  width: 100vw; /* 使用视口宽度单位，确保宽度占满整个浏览器视口宽度 */
  height: 100vh;
  background-image: url("../../assets/banner.jpg"); /* 相对路径指向图片，根据实际情况调整路径 */
  background-size: cover; /* 让图片自适应铺满整个元素，可能会裁剪图片 */
  background-position: center; /* 图片在元素内居中显示 */
  background-repeat: no-repeat; /* 防止图片重复平铺 */
  text-align: center;
  padding: 10px;
  display: flex; /* 添加这一行，将其变为 flex 容器 */
  justify-content: center; /* 水平方向居中内容 */
  align-items: center; /* 垂直方向居中内容 */
}

.title {
  color: #ffffff;
  font-size: 25px;
  font-weight: bold;
  padding: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000; /* 添加这一行实现黑色描边效果 */
}

.in {
  width: 400px;
}
.login {
  width: 432px;
  background-image: url("../../assets/bt.jpg"); /* 添加这一行，设置按钮的背景图片路径 */
  background-size: cover; /* 让图片自适应铺满按钮，可能会裁剪图片 */
  background-position: center; /* 图片在按钮内居中显示 */
  background-repeat: no-repeat; /* 防止图片重复平铺 */
}
.icon {
  background-color: #000;
  color: #fff;
  padding: 6px;
}
.ft {
  background: #ffffff;
}
</style>